<template>
  <div>
    <h1>用户管理</h1>

    <table v-if="!loading">
      <thead>
        <tr>
          <th>用户名</th>
          <th>状态</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="user in users" :key="user.user_id">
          <td>{{ user.username }}</td>
          <td>{{ user.disable ? '禁用' : '正常' }}</td>
        </tr>
      </tbody>
    </table>

    <div v-else>加载中...</div>

    <div class="pagination">
      <button @click="page--" :disabled="page <= 1">上一页</button>
      <span>第 {{ page }} 页 / 共 {{ Math.ceil(total / pageSize) }} 页</span>
      <button @click="page++" :disabled="page >= Math.ceil(total / pageSize)">下一页</button>
    </div>
  </div>
</template>
<script setup lang="ts">
const { login, getUsers } = useUserApi()


const page = ref(1)
const pageSize = 10
const users = ref<any[]>([])
const total = ref(0)
const loading = ref(false)

// 登录示例
const handleLogin = async () => {
  try {
    const user = await login({
      username: 'admin',
      password: 'password123'
    })
    console.log('Logged in user:', user)
  } catch (error) {
    console.error('Login failed:', error)
  }
}

// 获取用户数据
const loadUsers = async () => {
  try {
    const { data, pagination } = await getUsers(1, 10)
    console.log('Users:', data)
    users.value = data?.list || []
  } catch (error) {
    console.error('Failed to load users:', error)
  }
}


// 初始化加载
onMounted(() => {
  loading.value = true
  loadUsers()
    .then(() => {
      loading.value = false
    })
    .catch(() => {
      loading.value = false
    })
})

</script>
